<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" charset="utf-8" src="/res/plugin/ueditor1_4_3_3/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/res/plugin/ueditor1_4_3_3/ueditor.all.min.js"> </script>
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">

  <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  <script type="text/javascript" charset="utf-8" src="/res/plugin/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>
  <link rel="stylesheet" href="/res/stylesheets/admin-common.css">

  <style>

  </style>
</head>
<body>
<header>
  <div class="row">
    <div class="col s6 header-left">
      <div class="hide-on-med-and-down">后台管理系统</div>
    </div>
    <div class="col s6 right-align header-right">
      <div class="hide-on-med-and-down">
        <div></div>
        <div><img src="https://avatars4.githubusercontent.com/u/16890651?v=4&s=460"></div>
        <div></div>
      </div>
      <div>
        <a href="#" data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only">
          <i class="material-icons">view_headline</i>
        </a>
      </div>
    </div>
  </div>
  <div class="container">


  </div>
  <ul id="nav-mobile" class="side-nav fixed" style="transform: translateX(0%);">
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">关于</a></li>
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">开始使用</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">颜色</a></li>
              <li><a href="javscript:;">Grid</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Badges</a></li>
              <li><a href="javscript:;">Buttons</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">Mobile</a></li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">展示</a></li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Carousel</a></li>
              <li><a href="javscript:;">Collapsible</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
    <li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
  </ul>
</header>
<main>
  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="input_title" type="text" name="title" maxlength="30" data-length="30">
          <label for="input_title">标题</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s6">
          <input id="input_source" type="text" name="source" data-length="10">
          <label for="input_source">来源</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="input_summary" class="materialize-textarea" name="summary" data-length="250"></textarea>
          <label for="input_summary">摘要</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12 l6">
          <select id="input_categoryId" name="categoryId"  class="">
            <option value="" disabled selected>请选择主题</option>
          </select>
          <label for="input_categoryId">主题</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <!--<input id="input_labels" name="labels" type="text">-->
          <div >标签</div>
          <div class="chips chips-placeholder"></div>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="input_url" name="url" data-length="120" type="text">
          <label for="input_url">链接</label>
        </div>
      </div>
      <div class="switch">
        <label>
          私密
          <input type="checkbox" id="input_isSecret" checked>
          <span class="lever"></span>
          公开
        </label>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <div id="editor" type="text/plain"></div>
        </div>
      </div>
      <div>
        <div class="input-field col s12">
          <a id="btn-submit" class="waves-effect waves-light btn">发布</a>
          <a class="waves-effect waves-light btn">保存草稿</a>
        </div>
      </div>
    </form>
  </div>
</main>

<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.min.js"></script>
<script src="/res/plugin/layer/layer.js"></script>
<script src="/res/javascript/fetch.js"></script>

<script>
  var ue = null,
      alias = null;
  $(function () {
    ue = UE.getEditor('editor');
    init();
    $('.button-collapse').sideNav();
    $('#btn-submit').on('click', function (e) {
      layer.confirm('您确定要保存吗?', {
        btn: ['确定', '取消'] //按钮
      }, function () {
        var title = $('#input_title').val();
        var source = $('#input_source').val();
        var summary = $('#input_summary').val();
        var categoryId = $('#input_categoryId').val();
        var url = $('#input_url').val();
        var isSecret = !($('#input_isSecret').prop('checked'));
        var content = UE.getEditor('editor').getContent();

        var labels = $('.chips-placeholder').material_chip('data').map((item, index)=> {
          return item.tag;
        });
        var params = {
          title,
          source,
          summary,
          categoryId,
          labels,
          url,
          isSecret,
          content
        };
        console.log(params);
        $fetch('/api/blog/post/'+alias, 'put', params).then((result)=> {
          if(result.result==1){
            layer.alert('保存成功', function () {
              location.href = '/res/html/manage/postList.html';
            });
          }else{
            layer.alert(result.msg);
          }
        }).catch((err)=> {
          console.log(err);
          layer.alert(err);
        });
      });
    });
  });
function init() {
  let uri = '/api/blog/post/';
  alias = GetQueryString('alias');
  if(alias){
    uri += alias;
  }
  Promise.all([$fetch(uri, 'get'), $fetch('/api/blog/category/all', 'get')]).then((result)=>{
    if(result[1].result!==1){
        layer.alert(result[1].msg);
        return false;
    }
    if(result[0].result!==1){
      layer.alert(result[0].msg);
      return false;
    }
    let post = result[0].data;
    alias = post['alias'];
    $('#input_title').val(post['title']);
    $('#input_source').val(post['source']);
    $('#input_summary').val(post['summary']);
    $('#input_url').val(post['url']);
    ($('#input_isSecret').prop('checked', !post['isSecret']));
    ue.ready(function() {//编辑器初始化完成再赋值
      ue.setContent(post['content']);  //赋值给UEditor
    });
    $('.chips-placeholder').material_chip({
      data: post['labels'].map((item)=> { return {'tag': item}})
    });
    let text = '';
    result[1].data.forEach(function (item, index) {
      text += `<option value="${item._id}" ${item._id===post['categoryId']?'selected':''}>(${item.isSecret?'私密':'公开'})${item.cateName}</option>`;
    });
    $('#input_categoryId').append(text);
    $('#input_categoryId').material_select();
    Materialize.updateTextFields();     // 初始化input标签
  }).catch((err)=> {
    layer.alert(err);
    console.log('获取数据出错', err);
  });
}

</script>
</body>
</html>